<template>
  <div class="app-container" v-loading="loading.getPageList">
    <div>
      <el-button type="primary" size="small" @click="save">保存</el-button>
      <el-button type="primary" size="small" @click="preview()">
        预览
      </el-button>
       <el-button
          style="float: right; padding: 3px 0; margin-right: 10px"
          type="text"
          @click="$router.push({ path: '/workflow/formList' })"
          >返回</el-button
        >
    </div>
    <br />

    <div style="height: calc(100vh - 141px)">
      <el-row class="editbox">
        <el-col :span="2" style="padding-right: 10px" class="editbox">
          <div class="editbox-content" style="padding: 10px">
            <draggable
              v-model="basecontrols"
              :animation="500"
              v-bind="{
                group: { name: 'controlpanel', pull: 'clone' },
                sort: false,
              }"
              :clone="clone"
            >
              <transition-group>
                <p v-for="type in basecontrols" :key="type.type">
                  <el-tag style="width: 100%; text-align: left">
                    {{ type.label }}</el-tag
                  >
                </p>
              </transition-group>
            </draggable>
          </div>
        </el-col>
        <el-col :span="16" class="editbox">
          <div class="editbox-content">
            <el-form
              ref="form"
              label-width="auto"
              label-position="top"
              class="dynamic-form"
              size="mini"
            >
              <el-row :gutter="10">
                <draggable
                  v-model="orderedcontrols"
                  :animation="500"
                  dragClass="dragClass"
                  ghostClass="ghostClass"
                  chosenClass="chosenClass"
                  v-bind="{
                    group: { name: 'controlpanel' },
                    sort: true,
                  }"
                  @end="controlpanelEnd"
                  @add="controlpanelEnd"
                >
                  <transition-group>
                    <template v-for="(control, index) in orderedcontrols">
                      <dynamicContainer
                        v-if="control.type == 'container'"
                        :control="control || {}"
                        v-model="bindModel(index)[control.field]"
                        :isEdit="isEdit"
                        :key="index + 'container'"
                        @edit="(index) => editCtrl(index)"
                        @remove="removeCtrl(index)"
                        @copy="copyCtrl(index)"
                        :isEditForm="isEditForm"
                      ></dynamicContainer>
                      <dynamicCol
                        v-else
                        @edit="editCtrl(index)"
                        @remove="removeCtrl(index)"
                        @copy="copyCtrl(index)"
                        :key="index"
                        :control="control || {}"
                        v-model="bindModel(index)[control.field]"
                        :isEdit="isEdit"
                        :isEditForm="isEditForm"
                      >
                      </dynamicCol>
                    </template>
                  </transition-group>
                </draggable>
              </el-row>
            </el-form>
          </div>
        </el-col>
        <el-col :span="6" class="editbox" style="padding-left: 10px">
          <div shadow="never" class="editbox-content" style="padding: 5px">
            <crleditor
              class="options-content"
              :control="orderedcontrols[currentControlIndex] || {}"
              @default-change="editorChange"
            ></crleditor>
          </div>
        </el-col>
      </el-row>
    </div>
    <previewForm ref="previewForm" :controls="controls"></previewForm>
    <editForm ref="editForm"></editForm>
  </div>
</template>

<script>
import TableIndex from "@/layout/mixin/TableIndex";
import control from "./components/control";
import dynamicCol from "./components/dynamicCol.vue";
import crleditor from "./components/crleditor";
import draggable from "vuedraggable";
import dynamicContainer from "./components/dynamicContainer";
import previewForm from "./previewForm";
import editForm from "./editForm";
export default {
  components: {
    control,
    dynamicCol,
    crleditor,
    draggable,
    dynamicContainer,
    previewForm,
    editForm,
  },
  mixins: [TableIndex],
  data() {
    return {
      moduleName: "dynamicFormDesign",
      form: {},
      isEdit: true,
      isEditForm: true,
      basecontrols: [
        {
          span: 12,
          type: "string",
          field: "string",
          label: "文本",
          default: "",
          options: [],
        },
        {
          span: 24,
          type: "textarea",
          field: "textarea",
          label: "富文本",
          default: "",
          options: [],
        },
        {
          span: 12,
          type: "number",
          field: "number",
          label: "数字",
          default: 0,
          options: [],
        },
        {
          span: 12,
          type: "radio",
          field: "radio",
          label: "单选",
          default: "value",
          options: [{ label: "label", value: "value" }],
        },
        {
          span: 12,
          type: "checkbox",
          field: "checkbox",
          label: "勾选",
          default: ["value"],
          options: [{ label: "label", value: "value" }],
        },
        {
          span: 12,
          type: "select",
          field: "select",
          label: "单选列表",
          default: "value",
          options: [{ label: "label", value: "value" }],
        },
        {
          span: 12,
          type: "multipleselect",
          field: "multipleselect",
          label: "多选列表",
          default: ["value"],
          options: [{ label: "label", value: "value" }],
        },
        {
          span: 24,
          type: "table",
          field: "table",
          label: "表格",
          default: [],

          options: [
            {
              type: "string",
              field: "field1",
              label: "label1",
              width: "180",
              default: "1",
            },
            {
              type: "string",
              field: "field2",
              label: "label2",
              width: "180",
              default: "2",
            },
            {
              type: "string",
              field: "field3",
              label: "label3",
              width: "180",
              default: "3",
            },
            {
              type: "string",
              field: "field4",
              label: "label4",
              width: "180",
              default: "4",
            },
          ],
        },
        // {
        //   span: 24,
        //   type: "container",
        //   field: "container",
        //   label: "容器",
        //   default: [],
        //
        //   options: [
        //     {
        //       span: 24,
        //       type: "empty",
        //       field: "empty",
        //       label: "empty",
        //       default: "",
        //       options: [],
        //
        //     },
        //   ],
        // },
        {
          span: 12,
          type: "date",
          field: "date",
          label: "日期",
          default: new Date(),
          options: [],
        },
        {
          span: 12,
          type: "time",
          field: "time",
          label: "时间",
          default: '00:00:00',
          options: [],
        },
        {
          span: 12,
          type: "datetime",
          field: "datetime",
          label: "日期时间",
          default: new Date(),
          options: [],
        },
      ],
      controls: [
        {
          span: 24,
          type: "empty",
          field: "empty",
          label: "empty",
          default: "",
          options: [],
        },
      ],
      currentControlIndex: -1,
      value: {},
    };
  },
  watch: {
    value: {
      deep: true,
      handler() {},
    },
    id: {
      deep: true,
      handler() {
        this.getDesign(this.id);
      },
    },
  },
  computed: {
    orderedcontrols: {
      get() {
        return this.controls.filter((c) => c);
      },
      set(v) {
        this.currentControlIndex = -1;
        this.controls = v;
      },
    },
    id() {
      return { id: this.$route.query.id, version: Number(this.$route.query.version||1) };
    },
  },
  mounted() {
    this.getDesign(this.id);
  },
  methods: {
    bindModel(index) {
      var control = this.orderedcontrols[index];
      if (!control) {
        control = {};
        this.orderedcontrols[index] = control;
      }
      this.$set(this.value, control.field, control.default);
      return this.value;
    },
    editCtrl(index) {
      this.currentControlIndex = index;
    },
    copyCtrl(index) {
      var newObj = JSON.parse(JSON.stringify(this.controls[index]));
      this.controls.splice(index, 0, newObj);
    },
    removeCtrl(index) {
      this.controls.splice(index, 1);
    },
    controlpanelEnd(e) {
      this.currentControlIndex = -1;
      this.reloadPreview();
    },
    clone(origin) {
      const data = JSON.parse(JSON.stringify(origin));
      data.field = data.field + new Date().getTime();
      return data;
    },
    editorChange(newobj) {
      this.reloadPreview();
    },
    reloadPreview() {
      var controls = JSON.stringify(this.controls);
      this.controls = [];

      this.$nextTick(() => {
        this.controls = JSON.parse(controls);
      });
    },
    preview() {
      this.$refs.previewForm.show({
        controls: JSON.parse(JSON.stringify(this.controls)),
        value: this.value,
      });
    },
    save() {
      this.form.designContent = JSON.stringify(this.controls);
      this.$refs.editForm.show(this.form);
    },
    getDesign(id) {
      this.form.formDesignId = JSON.parse(JSON.stringify(id));
      this.$store
        .dispatch("dynamicFormDesign/getFormDesignVersion", id)
        .then((res) => {
          if (res && res.designContent)
            this.controls = JSON.parse(res && res.designContent);
        });
    },
  },
};
</script>

<style lang="scss">
.dynamic-form .el-form-item__label {
  line-height: 30px !important;
  padding: 0px !important;
}

.editbox {
  height: 100%;
}
.editbox-content {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  border: 1px solid #eeeeee;
  border-radius: 3px;
  padding: 20px;
}

.options-content-option {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  border: 1px solid #eeeeee;
  border-radius: 3px;
  padding: 2px;
}

.options-content .el-form-item {
  margin-bottom: 2px;
}
/*定义要拖拽元素的样式*/
.ghostClass {
  background-color: #cccccc !important;
}
.chosenClass {
  background-color: #eeeeee !important;
  opacity: 1 !important;
}
.dragClass {
  background-color: #999999 !important;
  opacity: 1 !important;
  box-shadow: none !important;
  outline: none !important;
  background-image: none !important;
}
.ctrl-empty:hover {
  background-color: #999999 !important;
}
.tag-move {
  cursor: move;
}
</style>
